
// 绘制进度条
export const drawLine = function (progress) {
  const canvas = document.getElementById('drawLineRef')
  const ctx = canvas.getContext('2d')
  var dpr = window.devicePixelRatio || 1
  var backingStoreRatio =ctx.webkitBackingStorePixelRatio ||ctx.mozBackingStorePixelRatio ||ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio ||ctx.backingStorePixelRatio ||1
  var ratio = dpr / backingStoreRatio //设备像素比
  canvas.style.width = canvas.width + "px"
  canvas.style.height = canvas.height + "px"
  canvas.width = canvas.width * ratio
  canvas.height = canvas.height * ratio
  ctx.translate(0.5, 0.5);
  // 第一根线
  // ctx.strokeStyle = '#000' // 设置线条颜色
  this.drawDash(ctx, [2, 2])
  // 第二根线
  // ctx.strokeStyle = '#1890FF' // 设置线条颜色
  this.drawDash(ctx, [20, 20])
  // const gradient = ctx.createConicGradient(canvas.width / 2, canvas.height / 2, canvas.width / 2)
  // gradient.addColorStop(0, 'rgba(222, 19, 80, 1)')
  // gradient.addColorStop(0.25, 'rgba(255, 175, 19, 1)')
  // gradient.addColorStop(0.5, 'rgba(111, 232, 191, 1)')
  // gradient.addColorStop(0.75, 'rgba(133, 14, 205, 1)')
  // gradient.addColorStop(1, 'rgba(222, 19, 80, 1)')
  // // ctx.fillStyle = gradient
  // // ctx.fillRect(0,0,canvas.width, canvas.height)
  // ctx.strokeStyle = gradient
  // 第三根线
  // ctx.strokeStyle = '#000' // 设置线条颜色
  this.drawDash(ctx, [20, 5])
  // 第四根线
  ctx.lineDashOffset = 4 // 设置初始偏移量
  this.drawDash(ctx, [4,16])
  // 第五根线
  this.drawDash(ctx, [20,3,3,3,3,3])
  // 蚂蚁线
  this.dashAni(ctx, canvas)
}
// 绘制虚线
export const drawDash = function (ctx, params) {
  ctx.beginPath()
  ctx.setLineDash(params)
  ctx.moveTo(0, this.y)
  ctx.lineTo(300, this.y)
  ctx.stroke()
  this.y += 20
}
// 蚂蚁线
export const dashAni = function (ctx, canvas) {
  this.offset = _.range((this.offset + 1) % 16, 0, 16)
  ctx.clearRect(0, 150, canvas.width, canvas.height)
  ctx.setLineDash([4, 2])
  ctx.lineJoin = 'round'
  ctx.lineDashOffset = -1 * this.offset
  ctx.strokeRect(10, 160, 100, 100)
  setTimeout(() => {
    this.dashAni(ctx, canvas)
  }, 20)
}